import VueRouter from 'vue-router';
import Vue from 'vue'

import HomePage from './pages/HomePage'
import FilmsPage from './pages/FilmsPage'
import DetailPage from './pages/DetailPage'
import NotFound from './pages/NotFound'



/*
    1、通过Vue.use 执行 VueRouter.install 方法
       为vue进行功能装载和定义
        a、通过 Vue.mixin 全局组件混入，混入了 beforeCreate() 函数
          在组件创建时，完成对组件加载自定义的router配置进行进行读取和解析
          自定义配置项 router 是通过 VueRouter 创建的路由实例对象
        b、通过 Vue.component('RouterView', View) 完成全局组件 RouterView 的定义
           该组件和 compontes 全局组件功能类似，用于描述页面占位
           为路由组件的显示，提供页面定义位置描述
        c、通过 Vue.component('RouterLink', Link); 完成全局组件 RouterLink 的定义
            该组件和 HTML标签 a 功能类似，通过定义该组件的 特殊属性 to 完成点击地址切换的操作
            为页面提供路由切换的操作 方式
            RouterLink 组件装载的标签为变色龙标签，可以通过对组件定义 tag 属性改变该标签的元素类型
            tag 默认取值为 a ，可以取值为HTML的相关标签名称
        d、通过 Object.defineProperty(Vue.prototype, '$route', {
                    get: function get () { return this._routerRoot._route }
                });
           完成了一个特殊对象的装载，$route = 激活路由的信息对象
           该对象时用于描述当前项目访问的路由的相关配置数据
        e、通过 Object.defineProperty(Vue.prototype, '$router', {
                    get: function get () { return this._routerRoot._router }
                });
            定义一个所有组件都可以直接访问的特殊对象 $router，该对象被叫做；路由控制对象
            $router 定义是针对项目的 路由操作方法
    2、通过new VueRouter 构造器创建路由实例对象，并提供main.js 的new Vue 路由配置参数
        为了在项目启动引导时，添加路由功能
    3、为路由完成配置定义
        a、完成url地址和组件的对应关系
    4、在项目中定义路由组件，需要显示切换时的位置
*/
Vue.use(VueRouter);

// new VueRouter(options);
//   options 定义路由的相关配置
//   路由的模式，路由的基础功能，地址和组件的关系定义(路由表)
//      - mode 属性定义 ，修改url地址的路由模式 history|hash
//      - linkActiveClass, 重新定义router-link-active 样式名
//      - linkExactActiveClass, 重新定义 router-link-exact-active 样式名
//      - 路由表属性 routes:[{},{},……] => 数组对象
//      - 路由组件地址配置对象取值
/*
            {
                path 定义组件对应的地址
                    path 取值时以 / 开头定义地址名称
                        + 一级路由必须定义 /
                        + 子路由地址定义时，可以选择性使用 /或没有/开头
                            * 子路由以 / 方式开头，表示在url地址上隐藏整合完成路径
                            * 子路由不以 / 方式开头，表示在url地址上完整展示访问路径
                    path 单取值为 / 描述地址访问的默认展示组件
                    path 单取值为 * 描述当前用户访问的地址在路由中不存在时，完成组件切换显示操作
                component 定义地址对应的组件
                redirect 重定向属性，该属性主要完成当前访问了对应path地址
                          且该地址对应的配置是 redirect 执行，直接自动执行
                          向指向地址的跳转操作
                children 定义当前组件的 子路由结构（多级路由）
                    取值为 [{},{}……] 该数组对象的取值定义方式 和 routes 路由表一致
                    子级路由路由定义后，需要在项目中定义对应关系的 RouterView
                name 为当前路由进行唯一名称定义
                meta 为路由定义元信息数据
                      为当前路由描述只有该路由才具有的特殊数据变量
                      meta会被记录到激活路由信息对象中
            }

*/
const router = new VueRouter({
    // mode:"history",
    // linkActiveClass,
    // linkExactActiveClass,
    routes:[
        {
            path:"/",
            // component:HomePage
            redirect:"/home"
        },
        {
            path:"/home",
            component:HomePage,
            meta:{
                hideBtn:true
            }
        },
        {
            path:"/films",
            name:"films",
            component:FilmsPage
        },
        {
            path:"/detail/:filmId/:aa?",
            name:"detail",
            component:DetailPage,
            meta:{
                showBottom:true,
                bottomName:"BottomBar"
            }
        },
        {
            path:"*",
            // redirect:"/home"
            component:NotFound
        }
    ]
});

export default router;
